<template>
  <div class="container">
    <el-dialog :title="changeId?'修改文章':'新增文章'" width="53%" :visible="opoclDialog" @close="cancelClick">
      <el-form
        label-width="90px"
        ref="articleForm"
        :model="articleForm"
        :rules="articleRules"
      >
        <el-form-item label="文章标题:" prop="title">
          <el-input
            v-model="articleForm.title"
            size="small"
            placeholder="请输入文章标签"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章内容:" prop="articleBody">
          <quillEditor
            v-model="articleForm.articleBody"
            @blur="$refs.articleForm.validateField('articleBody')"
            :options="editorOption"
          ></quillEditor>
        </el-form-item>
        <el-form-item label="视频地址:" prop="videoURL">
          <el-input
            v-model="articleForm.videoURL"
            size="small"
            placeholder="请输入视频地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-button @click="cancelClick">取 消</el-button>
          <el-button type="primary" @click="okClick">确 认</el-button
          >
        </el-row>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { add, detail, update } from '../../api/hmmm/articles'
export default {
  data () {
    return {

      // 富文本编辑器
      editorOption: {
        modules: {
          toolbar: {
            container: [
              // 设置自己需要的工具
              ['bold', 'italic', 'underline', 'strike'],
              [{ list: 'ordered' }, { list: 'bullet' }],
              ['blockquote', 'code-block'],
              ['image', 'link']
            ]
          }
        }
      },
      articleForm: {
        title: '',
        articleBody: '',
        videoURL: '',
        id: ''
      },
      articleRules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    opoclDialog: {
      type: Boolean,
      default: false
    },
    changeId: {
      type: Number,
      default: null
    }
  },
  components: {
    quillEditor
  },
  methods: {
    // 点击确认按钮
    okClick () {
      // 全局校验
      this.$refs.articleForm.validate(async (isOk) => {
        if (isOk) {
          // 有id就是修改文章
          if (this.articleForm.id) {
            await update(this.articleForm)
            this.$message.success('修改文章成功')
          } else {
            // 没id就是新增文章
            await add(this.articleForm)
            this.$message.success('新增文章成功')
            // 新增成功传值回到第一页
            this.$emit('pageToOne', 1)
          }
          this.cancelClick()
          // 刷新页面
          this.$emit('afterAddChangeData')
        }
      })
    },
    cancelClick () {
      // 清空
      this.$refs.articleForm.resetFields()
      // 关闭弹窗
      this.$emit('update:opoclDialog', false)
    },
    // 获取文章详情
    async getDetail () {
      const { data } = await detail({ id: this.changeId })
      this.articleForm.title = data.title
      this.articleForm.articleBody = data.articleBody
      this.articleForm.videoURL = data.videoURL
      this.articleForm.id = data.id
    }

  }
}
</script>

<style scoped>
.container /deep/ .ql-editor{
  height: 200px;
}
</style>
